<template>
    <div class="onToOne">
        <Title2>
            <van-icon name="arrow-left" slot="back" @click="$router.go(-1)"/>
            <span slot="title">特色课</span>
            <van-icon name="search" slot="search" @click="toSearch"/>
        </Title2>
        <div class="wrapper">
            <van-dropdown-menu active-color="orange">
            <van-dropdown-item title="选择上课时间" ref="time">
                <div class="timer">
                    <p class="title">日期选择</p>
                    <div class="week">
                        <div v-for="(item, index) in week" :key="index">{{item}}</div>
                    </div>
                    <div class="days">
                        <div v-for="(item, index) in days" :key="index"
                            :class="[
                                {'today':item.day==day},
                                {'disable':item.disable==0},
                                {'active':item.disable!=0 && item.day==selectedDayInfo.day},
                            ]"
                            @click="selected(item)"
                            >
                            {{item.day}}
                        </div>
                    </div>
                </div>
                <div class="selectedTimer">
                    <p>时间选择</p>
                    <p >
                    <input type="text" placeholder="开始时间" @click="show1=true" v-model="start"/>--
                    <input type="text" placeholder="结束时间" @click="show2=true" v-model="stop"/>
                    </p>
                    <van-datetime-picker
                        v-model="start"
                        type="time"
                        :min-hour="0"
                        :max-hour="24"
                        v-show="show1"
                        @confirm="show1=false"
                        @cancel="show1=false"
                        />
                    <van-datetime-picker
                        v-model="stop"
                        type="time"
                        :min-hour="0"
                        :max-hour="24"
                        v-show="show2"
                        @confirm="show2=false"
                        @cancel="show2=false"
                    />
                </div>
                <div class="bottom">
                    <button @click="reset('time')">重置</button>
                    <button style="background:orange" @click="selectParams('time')">确定</button>
                </div>
            </van-dropdown-item>
            <van-dropdown-item title="选择上课老师条件" ref="teacher">
                <div class="teacher">
                    <div class="teacherLevel">
                        <div class="title">老师类型</div>
                        <div class="content">
                            <div v-for="item in teacherLevelList" :key="item.level_id" @click="selectedLevel(item.level_id)"
                            :class="teacherLevel==item.level_id?'active':''"
                            >
                                {{item.level_name}}
                            </div>
                        </div>
                    </div>
                    <div class="sex">
                        <div class="title">老师性别</div>
                        <div class="content">
                            <div v-for="(item,index) in teacherSexList" :key="index" @click="teacherSex=index"
                            :class="teacherSex==index?'active':''"
                            >
                                {{item}}
                            </div>
                        </div>
                    </div>
                    <div class="lookOnly">
                        <div class="title">只看</div>
                        <div class="content">
                            <div>
                                <input type="checkbox" v-model="is_collect" />已关注
                            </div>
                            <div>
                                <input type="checkbox" v-model="is_attended" />上过课的
                            </div>
                        </div>
                    </div>
                    <div class="kinds" >
                        <div v-for="(item, index) in attrList" :key="index" class="kinds_1">
                            <div class="title">{{item.attr_name}}</div>
                            <div class="content">
                                <div v-for="key in item.child" :key="key.attr_val_id" 
                                :class="attr['attr'+index]==key.attr_val_id?'active':''" @click="setAttr(key.attr_val_id,index)">
                                    {{key.attr_val_name}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <button @click="reset('teacher')">重置</button>
                        <button style="background:orange" @click="selectParams('teacher')">确定</button>
                    </div>
                </div>
            </van-dropdown-item>
            
        </van-dropdown-menu>
        </div>
        <div class="contaner">
            <Card3 :data="list" @toAsk="toAsk" @toTeacherInfo="toTeacherInfo"/>
        </div>
        <van-dialog
            v-model="showDialog"
            @confirm='toLogin'
            confirm-button-text="立即登录"
            >
            <i class="close" @click="showDialog=false"></i>
            <img src="../assets/images/feiji.png">
            <p class="LoginText">赶紧登录一下吧</p>
            <p class="message">立即预约一对一辅导，浏览更多视频课程~</p>
        </van-dialog>
    </div>
</template>

<script>
import Title2 from '../components/common/Title2';
import Card3 from '../components/common/Card3';
import {otoCourseOptions,getOtoCourse} from '../untils/netWork';
    export default {
        data:()=>({
            day:'',
            days:[],
            show: false,
            show1: false,
            show2: false,
            minDate: new Date(),
            maxDate: new Date(2021, 5, 31),
            start: '',
            stop: '',
            teacherLevelList:[],
            attrList:[],
            teacherLevel:'',
            attr:{},
            teacherSexList:["男","女"],
            teacherSex:-1,
            looked:'',
            is_collect: false,
            is_attended:false,
            list:[],
            showDialog:false,
            week:["周一","周二","周三","周四","周五","周六","周日"],
            selectedDayInfo:{},
            selectedDay:''
        }),
        components:{
            Title2,Card3
        },
        methods:{
            selected(item){
                this.selectedDayInfo=item;
                this.filterDay()
            },
            reset(data){
                if(data=="time"){
                    this.selectedDay="";
                    this.selectedDayInfo={};
                    this.start="";
                    this.stop="";
                    this.$refs.time.toggle()
                }else if(data=="teacher"){
                    this.teacherLevel="";
                    this.teacherSex=-1;
                    this.is_collect=false;
                    this.is_attended=false;
                    this.attr={};
                    this.$refs.teacher.toggle()
                }
                this.selectParams()
            },
            selectParams(a){
                var data={};
                var array=[];
                // data.start_time=this.start?this.selectedDay+" "+this.start:"";
                // data.end_time=this.stop?this.selectedDay+" "+this.stop:"";
                if(this.selectedDay){
                    data.start_time=this.selectedDay+" "+"0:00";
                    data.end_time=this.selectedDay+" "+"23:59:59";
                }
                if(this.start){
                    data.start_time=this.start;
                    data.end_time="";
                }
                if(this.stop){
                    data.start_time="";
                    data.end_time=this.stop
                }
                if(this.selectedDay && this.start){
                    data.start_time=this.selectedDay+" "+this.start
                }
                if(this.selectedDay && this.stop){
                    data.end_time=this.selectedDay+" "+this.stop
                }

                data.level_id=this.teacherLevel?this.teacherLevel:''
                data.sex=this.teacherSex<0?'':this.teacherSex>0?1:0;
                data.is_collect=this.is_collect?1:0
                data.is_attended=this.is_attended?1:0;
                for (const key in this.attr) {
                    array.push(this.attr[key])
                }
                data.attr_val_id=array.join(",")
                if(a=="time"){
                    this.$refs.time.toggle()
                }else if(a=="teacher"){
                    this.$refs.teacher.toggle()
                }
                console.log(data)
                this.getOtoCourseHttp(data)
    
            },
            toSearch(){
                this.$router.push({
                    path:"/search",
                    query:{
                        name:"OTo"
                    }
                })
            },
            toLogin(){
                this.$router.push("/login")
            },
            toTeacherInfo(id){
                if(!window.localStorage.getItem("username")){
                    this.showDialog=true;
                }else{
                    this.$router.push("/teacherInfo")
                }
            },
            toAsk(id){
                if(!window.localStorage.getItem("username")){
                    this.showDialog=true;
                }else{
                    this.$router.push("/ask")
                }
            },
           
            filterDay(){
                
                var year=this.selectedDayInfo.year
                var month=this.selectedDayInfo.month
                var t=this.selectedDayInfo.day;
                this.selectedDay=`${year}-${month}-${t}`

            },
            getOtoCourseOptions(){
                otoCourseOptions().then(res=>{
                    this.teacherLevelList=res.data.otoTeacherLevel;
                    this.attrList=res.data.attrList;
                })
            },
            selectedLevel(id){
                this.teacherLevel=id
            },
            setAttr(id, index){
                this.$set(this.attr, "attr" + index, id);
                // console.log(this.attr)
            },
            getOtoCourseHttp(data){
                getOtoCourse(data).then(res=>{
                    this.list=res.data;
                    // console.log(this.list)
                })
            }

        },
        created(){
            this.getOtoCourseOptions();
            this.getOtoCourseHttp();
            this.day=this.$pub.initDays().day;
            this.days=this.$pub.initDays().days;
            console.log(this.days)
        }
    }
</script>

<style lang="scss" scoped>
.timer{
    width: 90%;
    margin: 0 auto;
    height: 180px;
    .today{
        // background: cornflowerblue;
        border-radius: 30px;
        background-color: rgb(200, 200, 200);
    }
    .disable{
        color: rgb(200, 200, 200);
    }
    .active{
        background: orange;
        border-radius: 30px;
    }
    .title{
        line-height: 40px;
        font-size: 14px;
    }
    .week,.days{
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
    }
    .days{
        flex-flow: wrap;
        div{
            width: 30px;
            height: 30px;
            // text-align: center;
            line-height: 30px;
            margin: 7px;
        }
    }

}
.wrapper ::v-deep  .van-popup {
    max-height: 100% !important;
    height: 100%;
}
.onToOne{
    width: 100%;
    background: rgb(240, 240, 240);
}
.selectedTimer{
    padding: 0 18px;
    p{
        line-height: 40px;
        font-size: 14px;
        input{
            width: 30%;
            height: 30px;
            text-align: center;
        }
    }
}

.teacher{
    padding-left: 10px;
    .title{
        font-size: 14px;
        line-height: 30px;
    }
    .content{
        display: flex;
        justify-content: flex-start;
        align-content: center;
        flex-flow: wrap;
        div{
            width: 81px;
            height: 30px;
            background: rgb(240, 240, 240);
            margin-right: 10px;
            margin-bottom: 5px;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
    }
    
    .active{
        color: orange;
    }
    .teacherLevel,
    .bottom,
    .kinds_1,
    .sex,
    .teacherLevel,
    .lookOnly{
        padding: 10px 0;
        border-top: 1px solid rgb(240, 240, 240);
    }
    .kinds{
        margin-bottom: 50px;
    }
}
.bottom{
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        background: white;
        button{
            width: 40%;
            height: 30px;
            line-height: 30px;
            margin-right: 10px;
        }
    }
.van-dialog{
      width:80%;
      height:360px;
      background:rgba(255,255,255,1);
      border-radius:30px;
      text-align: center;
      // .van-dialog__content,.van-dialog__footer{
      //   text-align: center;
      // }      
      .close{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 15px;
        right: 20px;
        background-image: url('../assets/images/icon_member_account_close.png');
        background-size: 100%;
        background-position: center;
      }
      img{
        width: 100%;
        height: 200px;
        margin-top: 20px;
      }
      .LoginText{
        font-size:16px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height: 44px;
      }
      .message{
        font-size:13px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height: 38px;
      }
      .van-button{
        width:472px;
        height:80px;
        background:rgba(235,97,0,1);
        border-radius:40px;
        font-size:30px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 80px;
        margin-top: 57px;
      }
    }

</style>